<!--
 * @Author: cqg 
 * @Date: 2020-11-26 14:13:05
 * @LastEditors: cqg
 * @LastEditTime: 2020-12-02 15:31:41
 * @Description: file content
-->
<template>
  <div>
    <el-dialog title="选择合同模板"
               :visible.sync="dialogVisible"
               width="50%"
               :close-on-click-modal="false">
      <div>
        <el-row>
          <el-col :span="4">合同类型:</el-col>
          <el-col :span="20">
            <el-radio-group v-model="contractType"
                            class="hideCircle"
                            size="small">
              <el-radio :label="item.value"
                        v-for="item in contractTypes"
                        border
                        :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="4">合同细类:</el-col>
          <el-col :span="20">
            <el-radio-group v-model="contractDetail">
              <el-radio style="margin-bottom:10px;"
                        :label="item.value"
                        v-for="item in contractSubTypes"
                        :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </div>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary"
                   @click="next">确定下一步</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDict } from '@/utils'
export default {
  name: 'contract-type-select',
  data() {
    return {
      // 合同类型
      contractType: '',
      // 合同细类
      contractDetail: '',
      dialogVisible: false,
    }
  },

  computed: {
    // 合同类型列表
    contractTypes() {
      return getDict('rent_contract_type')
    },
    // 合同细类列表
    contractSubTypes() {
      return {
        '01': [{ label: '周转房', value: '3' }],
        '02': [
          { label: '产业用房', value: '1' },
          { label: '商业用房', value: '2' },
          { label: '停车场', value: '4' },
          { label: '幼儿园', value: '5' },
          { label: '文体', value: '6' },
          { label: '养老', value: '7' },
          { label: '医疗', value: '8' },
          { label: '仓库', value: '10' },
        ],
        '03': [{ label: '其它', value: '9' }],
      }[this.contractType]
    },
  },
  watch: {
    contractType(val) {
      if (!this.contractSubTypes.length) return
      this.contractDetail = this.contractSubTypes[0].value
    },
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.contractType = this.contractTypes.length
        ? this.contractTypes[0].value
        : ''
    },
    next() {
      if (this.contractType != '' && this.contractDetail != '')
        this.$parent.$router.push({
          path: `/wy-lessor/contract/edit?optype=add&type=${this.contractType}&subtype=${this.contractDetail}`,
        })
      else this.$alert('请选择合同模板和合同细类')
    },
  },
}
</script>
<style scoped lang="scss">
@include formWrap();
.hideCircle {
  /deep/ .el-radio {
    min-width: 150px;
    padding: 0;
    border-radius: 2px;
    line-height: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    &:after {
      content: '';
      width: 20px;
      height: 20px;
      background-color: #409eff;
      position: absolute;
      right: -10px;
      bottom: -10px;
      transform: rotate(45deg);
      display: none;
    }
    &.is-checked {
      border: 1px solid #409eff;
      &:after {
        display: block;
      }
    }
    .el-radio__inner {
      display: none;
    }
    .el-radio__label {
      font-size: 14px;
    }
  }
}
</style>


